<template>
  <!-- 搜索结果列表 -->
  <div class="searchResult">
    <div class="shopList">
      <div
        class="shopItem"
        v-for="searchItem in shopList"
        :key="searchItem.id"
        @click="$router.push('/detail')"
      >
        <!-- 头部的图片 -->
        <div class="hd">
          <VanImage
            class="preLogo"
            width="173px"
            height="173px"
            :src="searchItem.listPicUrl"
            radius="5px"
          ></VanImage>
          <div class="promDesc-wrap" v-if="searchItem.promDesc">
            <img
              src="//yanxuan.nosdn.127.net/6bd2300f42e946b3960adf1dc7922b77.png"
              alt=""
            />
            <div class="promDesc">{{ searchItem.promDesc }}</div>
          </div>
        </div>

        <div class="name">
          <VanImage
            class="nameImg"
            width="44px"
            height="17px"
            src="https://yanxuan.nosdn.127.net/static-union/1640835741e1f775.png"
          ></VanImage>
          {{ searchItem.name }}
        </div>

        <!-- 价格 -->
        <div class="price">
          <!-- 现价 -->
          <div class="newPrice">
            <!-- 到手价文本 -->
            <div class="prefix" v-if="searchItem.prefix">
              {{ searchItem.prefix }}
            </div>

            <!-- 现价 -->
            <div class="priceNumWrap">
              <span class="priceIcon">￥</span>
              <span class="priceNum">
                {{ searchItem.integerPrice }}
              </span>
              <span class="priceFloat" v-if="searchItem.decimalsPrice"
                >.{{ searchItem.decimalsPrice }}</span
              >
              <!-- 起字的文本 -->
              <span class="suffix" v-if="searchItem.suffix">{{
                searchItem.suffix
              }}</span>
            </div>
          </div>

          <!-- 原价 -->
          <span class="originPrice" v-if="searchItem.counterPrice"
            >￥{{ searchItem.counterPrice }}</span
          >
        </div>

        <!-- 下面的banner -->
        <div class="bannerWrap">
          <!-- bgRed -->
          <div
            class="banner formal"
            :class="{
              bgRed: !searchItem.title,
            }"
            v-show="searchItem.content"
          >
            <VanImage
              class="icon"
              width="10px"
              height="3px"
              src="https://yanxuan.nosdn.127.net/b268d0d2f46c41d3b3edf5fa33eea3de.png"
            ></VanImage>
            <div class="content">
              <div class="left" v-if="searchItem.title">
                {{ searchItem.title }}
              </div>
              <div class="right">
                {{ searchItem.content }}
              </div>
            </div>
          </div>
        </div>

        <!-- 图片的描述 -->
        <div class="specification" v-if="searchItem.colorNum">
          <div>{{ searchItem.colorNum }}</div>
          <div></div>
          <div>色</div>
          <div>可</div>
          <div>选</div>
        </div>

        <!-- 外国制造 -->
        <div class="specification" v-if="searchItem.productPlace">
          <div v-for="(product, index) in searchItem.productPlace" :key="index">
            {{ product }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { isInteger } from '@/utils/tool';
export default {
  name: 'ShopList',
  props: {
    // 商品列表数据
    searchShopList: {
      typeof: Array,
      default: () => {
        return [
          {
            name: '卡通保暖短外套女落肩袖加厚宽松复古大衣服',
            finalPriceInfoVO: {
              banner: {
                logo: null,
                title: '特价',
                price: null,
                content: '正在抢购中',
              },
              priceInfo: {
                finalPrice: {
                  prefix: '到手价',
                  price: '41',
                  suffix: '起',
                },
                counterPrice: '88',
                basicPrice: null,
              },
              type: 0,
            },
            listPicUrl:
              'https://yanxuan-item.nosdn.127.net/455080dc75edb4cc728c789805b9811d.jpg',
            promDesc: '可用红包',
            productPlace: '澳大利亚制造', // 制造国家
            colorNum: 5, // 色彩
          },
        ];
      },
    },
  },

  methods: {
    // 计算价格，分离整数和小数
    computedPrice(num, index) {
      if (index === 1) {
        if (!isInteger(num) && num) {
          return num.split('.')[index];
        } else {
          return;
        }
      }

      if (isInteger(num)) {
        return num;
      } else if (!num) {
        return;
      } else {
        return num.split('.')[index];
      }
    },

    // 处理价格
    price(searchItem, index) {
      return (
        this.computedPrice(
          (searchItem.finalPriceInfoVO.priceInfo.finalPrice || {}).price || '',
          index
        ) ||
        this.computedPrice(
          (searchItem.finalPriceInfoVO.priceInfo || {}).basicPrice,
          index
        )
      );
    },
  },

  /**
   * listPicUrl：hd图片
   * promDesc：图片上的描述
   * name：商品名字
   * prefix：到手价文本
   * suffix：起字的文本
   * counterPrice：原价
   * title：banner中左边的title
   * content：banner中右边的content
   * integerPrice：整数
   * decimalsPrice：小数
   * colorNum：图片上颜色的数量
   * productPlace：属于的国家
   */
  computed: {
    shopList() {
      return this.searchShopList.map(item => {
        return {
          listPicUrl: item.listPicUrl,
          promDesc: item.promDesc,
          name: item.name,
          prefix: (item.finalPriceInfoVO.priceInfo.finalPrice || {}).prefix,
          suffix: (item.finalPriceInfoVO.priceInfo.finalPrice || {}).suffix,
          counterPrice: (item.finalPriceInfoVO.priceInfo || {}).counterPrice,
          title: (item.finalPriceInfoVO.banner || {}).title,
          content: (item.finalPriceInfoVO.banner || {}).content,
          integerPrice: this.price(item, 0),
          decimalsPrice: this.price(item, 1),
          colorNum: item.colorNum,
          productPlace: item.productPlace,
        };
      });
    },
  },
};
</script>

<style lang="less" scoped>
.searchResult {
  padding: 10px 0 25px 0;
  .shopList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    &::after {
      display: block;
      content: '';
      width: 173px;
    }
    .shopItem {
      width: 173px;
      position: relative;
      box-sizing: border-box;
      padding: 0 5px 26px 0;

      .hd {
        position: relative;
        width: 173px;
        height: 173px;
        border-radius: 6px;
        // 直接复制的
        .promDesc-wrap {
          display: flex;
          align-items: center;
          padding: 0 0.1rem;
          max-width: 2.31rem;
          position: absolute;
          bottom: 0.14rem;
          left: 0.14rem;
          color: #dd1a21;
          border: 1px solid #fa1e32;
          border-radius: 0.23rem;
          background: #fff;
          font-size: 0.2rem;
          img {
            width: 0.14rem;
            height: 0.16rem;
            margin-right: 0.05rem;
          }
          .promDesc {
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }

      .name {
        font-size: 15px;
        margin-top: 8px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /** 多行文本溢出...*/
        overflow: hidden;
        .nameImg {
          vertical-align: -3px;
        }
      }

      // 价格
      .price {
        display: flex;
        align-items: center;
        height: 30px;
        .newPrice {
          display: flex;
          align-items: center;
          font-weight: 600;
          color: #fa1e32;
          .prefix {
            font-size: 12px;
          }
          .priceNumWrap {
            display: flex;
            align-items: center;
            .priceIcon {
              font-size: 12px;
              margin-top: 3px;
            }
            .priceNum {
              font-size: 20px;
            }
            .priceFloat {
              font-size: 12px;
              margin-top: 4px;
            }
            .suffix {
              font-size: 12px;
            }
          }
        }
        .originPrice {
          font-size: 12px;
          color: #999999;
          text-decoration: line-through;
          margin-top: 3px;
        }
      }

      .bannerWrap {
        margin-top: 5px;
        font-size: 12px;
        .banner {
          position: relative;
          &.formal {
            border-radius: 20px;
            padding-left: 2px;
            color: #fa1e32;
            background-color: #ffe9eb;
            font-weight: 600;
          }
          &.bgRed {
            width: auto;
            display: inline-block;
            padding-right: 2px;
            .content {
              .right {
                background-color: #fa1e32;
                color: #fff;
                padding: 2px 6px;
                border-radius: 20px;
                margin-left: 0; // 将左边的margin变为0

                font-weight: 700;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
          .icon {
            position: absolute;
            top: -3px;
            left: 20px;
          }
          .content {
            display: flex;
            align-items: center;
            height: 23px;
            background-color: #ffe9eb;
            border-radius: 20px;
            .left {
              background-color: #fa1e32;
              border-radius: 20px;
              padding: 2px 4px;
              height: 15px;
              text-align: center;
              color: #fff;
            }
            .right {
              height: 15px;
              margin-left: 4px;
            }
          }
        }
      }

      // 图片的描述
      .specification {
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 0.75px;
        border: 0.5px solid #b4a078;
        width: 12px;
        top: 0;
        margin-top: 3.75px;
        margin-left: 3.75px;
        padding: 4.5px 0;
        color: #b4a078;
        background-color: #f4f4f4;
        div {
          font-size: 12px;
          text-align: center;
          line-height: 1;
        }
      }
    }
  }
}
</style>
